高度塌陷:由于父元素中的子元素设置了浮动属性,会造成父元素高度塌陷
防止高度塌陷:
1、直接给父元素设置高度:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="rerest.css">
<style type="text/css">
ul{width:305px;border:1px solid red;margin:50px auto; }
ul li{width:100px; height:100px; color:white; text-align:center; line-height:100px; font-size:30px; }
li{ float:left}
.a{background:green;}
.b{background:blue;}
.c{background:orange;}
</style>
</head>
<body>
<ul>
<li class="a">1</li>
<li class="b">2</li>
<li class="c">3</li>
</ul>
</body>
</html>
返回值:
修改块级元素,直接加行高:
ul{width:305px;border:1px solid red;margin:50px auto;height:200px }